<script setup lang="ts">
import cssTools from "@/utils/cssTools";

const props = defineProps({
  MainColor: {
    type: String,
    required: false,
    default: "rgb(33,150,243)",
    // default: 'rgb(253,0,21)'
  },
  Sbtn1Names: {
    type: Object as PropType<SwitchBtn1Name>,
    required: false,
    default: { name1: "纹理", name2: "名词" },
  },
});

// 自定义事件
const emit = defineEmits(["update:modelValue"]);

function onRadioChange(event: Event) {
  const target = event.target as HTMLInputElement;
  if (target.checked) emit("update:modelValue", target.value);
}

const shadowColor = computed(() => {
  return cssTools.rgb2rgba(props.MainColor, 0.22);
});
</script>

<template>
  <fieldset id="switch" class="radio">
    <input
      checked="true"
      name="switch"
      :value="true"
      @change="onRadioChange"
      id="on"
      type="radio"
    />
    <label for="on">{{ Sbtn1Names.name1 }}</label>
    <input
      name="switch"
      :value="false"
      @change="onRadioChange"
      id="off"
      type="radio"
    />
    <label for="off">{{ Sbtn1Names.name2 }}</label>
  </fieldset>
</template>

<style scoped>
fieldset {
  display: flex;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  border: 0;
  --MainColor: v-bind(MainColor);
}

/* Hide default radio */
.radio input[type="radio"] {
  position: absolute;
  visibility: hidden;
  display: none;
  opacity: 0;
  z-index: -1;
}

/* Customizing label */
.radio label {
  position: relative;
  padding: 10px 20px 10px 25px;
  cursor: pointer;
  border-radius: 20px;
  color: var(--MainColor);
  margin: 0px 5px;
  font-weight: 600;
  text-transform: uppercase;
}

.radio label,
.radio label::before {
  -webkit-transition: 0.25s all ease;
  transition: 0.25s all ease;
}

.radio label::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  content: " ";
  position: absolute;
  top: 30%;
  left: 0;
  width: 1em;
  height: 1em;
  border: 2px solid v-bind(MainColor);
}

.radio input[type="radio"] + label::before {
  border-radius: 1em;
}

/* Checked toggle */
.radio input[type="radio"]:checked + label {
  color: #fff;
  background: v-bind(MainColor);
  z-index: 1;
}

.radio input[type="radio"]:checked + label {
  padding: 10px 20px 10px 20px;
}

.radio input[type="radio"]:checked + label::before {
  top: 4px;
  width: 100%;
  height: 2em;
  z-index: -1;
}

.radio:hover input[type="radio"]:checked + label {
  -webkit-box-shadow: v-bind(shadowColor) 0px 0px 0px 25px;
  box-shadow: v-bind(shadowColor) 0px 0px 0px 25px;
}
</style>
